import React, { useState, useEffect, useMemo } from "react";
import { Form, Input, Button, Select, DatePicker, InputNumber } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import AntdWrapper from "@/views/components/AntdWrapper";
import { customTrimFunc } from "@/utils/utils.jsx";
import IconFont from "@/components/IconFont";
import styles from "./index.module.less";
import { SwapRightOutlined } from "@ant-design/icons";

const { Option } = Select;
const { RangePicker } = DatePicker;

const SearchContent = ({ query, handleSearch }) => {
	const [form] = Form.useForm();

	const combinationGoodsCodeVal = Form.useWatch("combinationGoodsCode", form);
	const combinationGoodsNameVal = Form.useWatch("combinationGoodsName", form);
	const imageNotBlankVal = Form.useWatch("imageNotBlank", form);
	const timeVal = Form.useWatch("time", form);

	useEffect(() => {
		form.resetFields();
	}, [query]);

	//点击重置
	const onReset = () => {
		handleSearch();
	};

	return (
		<Form
			form={form}
			className={styles.formContent}
			onFinish={() => handleSearch(customTrimFunc(form.getFieldValue()))}
			name="express-warning-search-form"
			initialValues={{ ...query }}
		>
			<AntdWrapper label={combinationGoodsCodeVal ? "组合编号" : ""} style={{ width: "210px" }}>
				<Form.Item name="combinationGoodsCode">
					<Input placeholder="组合编号" />
				</Form.Item>
			</AntdWrapper>

			<AntdWrapper label={combinationGoodsNameVal ? "组合商品名称" : ""} style={{ width: "210px" }}>
				<Form.Item name="combinationGoodsName">
					<Input placeholder="组合商品名称" />
				</Form.Item>
			</AntdWrapper>

			<AntdWrapper label={imageNotBlankVal || imageNotBlankVal == 0 ? "组合图片" : ""} style={{ width: "210px" }}>
				<Form.Item label="" name="imageNotBlank" colon={false}>
					<Select placeholder="组合图片" allowClear>
						<Option value={true}>有商品图片</Option>
						<Option value={false}>无商品图片</Option>
					</Select>
				</Form.Item>
			</AntdWrapper>

			<AntdWrapper style={{ width: 210 }}>
				<Form.Item
					colon={false}
					label={<span style={{ fontSize: "12px", color: "#727E8F", marginLeft: "2px" }}>零售价</span>}
					style={{ height: "24px" }}
				>
					<Form.Item
						style={{
							display: "inline-block",
							width: "40%"
							//   width: '80px',
							// marginRight: 10
						}}
						name="minRetailPrice"
					>
						<InputNumber bordered={false} precision="2" min={0} max={9999999.99} placeholder="最小值" />
					</Form.Item>
					<span
						style={{
							display: "inline-block",
							textAlign: "center"
							// margin: "0 9px"
						}}
					>
						<SwapRightOutlined />
					</span>
					<Form.Item style={{ display: "inline-block", width: "40%" }} name="maxRetailPrice">
						<InputNumber bordered={false} precision="2" min={0} max={9999999.99} placeholder="最大值" />
					</Form.Item>
				</Form.Item>
			</AntdWrapper>

			<AntdWrapper label={timeVal ? "生成时间" : ""} style={{ width: 444 }}>
				<Form.Item name="time" style={{ marginRight: 6 }}>
					<RangePicker
						placeholder={["生成开始时间", "生成结束时间"]}
						format="YYYY-MM-DD HH:mm:ss"
						showTime
						style={{ width: "100%" }}
					/>
				</Form.Item>
			</AntdWrapper>

			{/* <Form.Item label=" " colon={false}> */}
			<div style={{ display: "flex", marginBottom: "16px" }}>
				<Button size="middle" type="primary" icon={<SearchOutlined />} htmlType="submit">
					搜索
				</Button>

				<Button style={{ marginLeft: "8px" }} size="middle" onClick={onReset} icon={<IconFont type="iconformReset" />}>
					重置
				</Button>
			</div>
			{/* </Form.Item> */}
		</Form>
	);
};

export default SearchContent;
